<!--
 * @Descripttion: 
 * @version: 
 * @Author: yuanliutech
 * @Date: 2022-12-06 16:57:41
 * @LastEditors: yuanliutech@lwj
 * @LastEditTime: 2022-12-21 14:01:35
-->
<template>
  <div>
    <el-dialog
      title="新增组织机构"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form :model="addForm" :rules="rules" ref="refForm" label-width="80px">
        <el-form-item size="small" label="名称" prop="orgName">
          <el-input
            clearable
            v-model.trim="addForm.orgName"
            placeholder="请输入名称"
            oninput="value=value.replace(/\s*/g,'')"
            @blur="addForm.orgName = $event.target.value"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item
          size="small"
          label="上级组织机构"
          prop="pOrgName"
          v-if="parentOrgInfo.id"
        >
          <el-input
            clearable
            disabled
            v-model="addForm.pOrgName"
            placeholder="上级组织机构"
          ></el-input>
        </el-form-item>

        <el-form-item size="small" label="省市区" prop="region">
          <el-cascader
            v-model="addForm.region"
            placeholder="请选择省市区"
            :options="provinceCityAreaData"
            :props="{ expandTrigger: 'hover' }"
            filterable
            @change="changeProvinceCityArea"
            style="width: 380px"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item size="small" label="详细地址" prop="address">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="详细地址"
            v-model="addForm.address"
            oninput="value=value.replace(/\s*/g,'')"
            @blur="addForm.address = $event.target.value"
            maxlength="30"
            resize='none' :autosize="{ minRows: 2, maxRows: 5 }"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button size="small" @click="submit" v-preventReClick="1000" class="confirm-button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { reqOrgAdd } from "@api/api.js";
import { mapState } from "vuex";
import { provinceCityAreaArray } from "@utils/province-city-area";
export default {
  props: ["parentOrgInfo"],
  data() {
    return {
      provinceCityAreaData: provinceCityAreaArray,
      dialogVisible: true,
      addForm: {
        orgName: "",
        parentId: null,
        region: "",
        province: "",
        city: "",
        area: "",
        address: "",
        PpjtName: "", //父组织机构名称
      },
      // 表单验证规则
      rules: {
        orgName: [
          {
            required: true,
            message: "请输入组织机构",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },

          { trigger: "blur" },
        ],
        region: [
          {
            required: true,
            message: "请选择省市区",
            trigger: "change",
          },
        ],
        pOrgName: [
          {
            required: true,
            message: "上级组织机构",
            trigger: "blur",
          },
        ],
      },
      isLoad: false, //判断是否为顶级组织机构，是：不请求loadChildren  ； 否：请求loadChildren
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    parentOrgInfo(val) {
      if (!val) return;
      this.addForm.parentId = val.id;
      this.addForm.pOrgName = val.orgName;
      this.addForm.region = [val.province, val.city, val.area];
      this.addForm.province = val.province;
      this.addForm.city = val.city;
      this.addForm.area = val.area;
    },
  },
  methods: {
    // 省市区获取
    changeProvinceCityArea(val) {
      this.addForm.province = val[0];
      this.addForm.city = val[1];
      this.addForm.area = val[2];
      this.addForm.region = [val[0], val[1], val[2]];
    },
    // 点击新增
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return ;
        let parentId = this.addForm.parentId ? this.addForm.parentId : "0";
        let params = {
          parentId,
          tenantId: this.user.tenantId,
          orgName: this.addForm.orgName,
          province: this.addForm.province,
          city: this.addForm.city,
          area: this.addForm.area,
          address: this.addForm.address,
        };
        const res = await reqOrgAdd(params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("新增成功");
        this.$refs.refForm.resetFields();
        this.dialogVisible = false;
        this.$emit("updateTree");
      });
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
      this.$emit("clearParentOrgInfo");
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");
</style>